<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script  src="color/FEffectParser.js" ></script>
    <script  src="color/FColorConverter.js" ></script>
    <script  src="color/FEffectBase.js" ></script>
    <script  src="color/FStylizeBase.js" ></script>
    <script  src="color/FColorBase.js" ></script>
    <script  src="color/FStylizeShadow.js" ></script>
    <script  src="color/FPattern.js" ></script>
    <script  src="color/FGradient.js" ></script>
    <script  src="color/FColor.js" ></script>
    <script  src="color/FGraphBase.js" ></script>
    <script  src="color/FStroke.js" ></script>
    <script  src="color/FFilterBase.js" ></script>
    <script  src="color/FImageFilter.js" ></script>

    <script  src="obj/Serializer.js" ></script>
    <script  src="obj/PrintObj.js" ></script>
    <script  src="obj/TextTableTd.js" ></script>
    <script  src="obj/TextTableObj.js" ></script>
    <script  src="obj/TextObj.js" ></script>
    <script  src="obj/Template.js" ></script>
    <script  src="obj/TableTd.js" ></script>
    <script  src="obj/TableObj.js" ></script>


    <script  src="obj/PrintPage.js" ></script>
    <script  src="obj/Parser.js" ></script>
    <script  src="obj/FileObj.js" ></script>
    <script  src="obj/ImageObj.js" ></script>
    <script  src="obj/GroupObj.js" ></script>
    <script  src="obj/SubTemplateObj.js" ></script>
    <script  src="obj/GraphObj.js" ></script>
    <script  src="obj/FrameObj.js" ></script>


    <script  src="common/TextTableTraveller.js" ></script>
    <script  src="common/StyleProcessor.js" ></script>
    <script  src="common/PointPath.js" ></script>
    <script  src="common/Point.js" ></script>
    <script  src="common/ParaContour.js" ></script>
    <script  src="common/OnePara.js" ></script>
    <script  src="common/FMatrix.js" ></script>
    <script  src="common/Effect.js" ></script>
    <script  src="common/CompoundPath.js" ></script>




    <script type="text/javascript">
    // 定义解析函数
    function fromPdfParseResult(json){
        var page = new PrintPage();
        page.sub = new Array(); // 以前记录的是对象，改成记录id
        page.index= 0 ;  // 页码，从0开始
        page.w=1000;				// 宽
        page.h=1000;				// 高

        var group = new GroupObj();

		page.root = group;
        group.fromJson(JSON.parse(json))

        return page;
    }
    // RGB-> #FFFFFF
    function rgbToHex(colors){
        var r = ((colors[0].toFixed(0))*1).toString(16);
        r = r.length==0?"00":(r.length==1?("0"+r): r.substr(0,2));
        var g = ((colors[1].toFixed(0))*1).toString(16);
        g = g.length==0?"00":(g.length==1?("0"+g): g.substr(0,2));
        var b = ((colors[2].toFixed(0))*1).toString(16);
        b = b.length==0?"00":(b.length==1?("0"+b): b.substr(0,2));
        return '#'+r+g+b;
    }

        // 解析并描绘数据
        function parseAndDraw(json){
            // 获取canvas的context
            // 为重用addToPdf代码，context补齐以下函数：
            //      path(svgPath)
            //      fillColor(colors)
            //      opacity(alpha)
            //      linearGradient(x0,y0,x1,y1)
            //      fill(f)
            //      radialGradient(x0,y0,r0,x1,y1,r1)
            //      strokeColor(strokeClr)
			//      lineWidthFunc(width)
			//		lineCapFunc(cap) 
            //		lineJoinFunc(join)
            //		miterLimitFunc(limit)

            //------------------------------------补充函数 start------------------------------------
            //                      功能：描绘svg格式的path
            //                      参数：svgPath：svg格式的path，例如，SVG格式的字符串：
            //                                      'M 0,20 L 100,160 Q 130,200 150,120 C 190,-40 200,200 300,150 L 400,90 z
            //                                      M 0,20 L 100,160 Q 130,200 150,120 C 190,-40 200,200 300,150 L 400,90 z'
            //                      返回：doc对象
            var canvas=document.getElementById('canvas');
            var doc=canvas.getContext('2d');

            doc.path = function(svgPath){
                doc.beginPath();
                var factor = 1;
                var arr = svgPath.split(" ");
                var len = arr.length;
                for(var i=0; i<len; i++){
                    var item = arr[i];
                    if(item=='M'){
                        var p = arr[i+1].split(',');
                        doc.moveTo(p[0]*factor,p[1]*factor);
                        i++;
                    }else if(item=='L'){
                        var p = arr[i+1].split(',');
                        doc.lineTo(p[0]*factor,p[1]*factor);
                        i++;
                    }else if(item=='Q'){
                        var p1 = arr[i+1].split(',');
                        var p2 = arr[i+2].split(',');
                        doc.quadraticCurveTo(p1[0]*factor, p1[1]*factor, p2[0]*factor, p2[1]*factor);
                        i+=2;
                    }else if(item=='C'){
                        var p1 = arr[i+1].split(',');
                        var p2 = arr[i+2].split(',');
                        var p3 = arr[i+3].split(',');
                        doc.bezierCurveTo(p1[0]*factor, p1[1]*factor, p2[0]*factor, p2[1]*factor, p3[0]*factor, p3[1]*factor);
                        i+=3;
                    }else if(item=='z'){
                        doc.closePath();
                    }
                }
                return doc;
            }

            //                      功能：填充色
            //                      参数：colors：rgb分量的颜色数组或者cmyk分量的颜色数组
            //                      返回：doc对象
            doc.fillColor = function(colors){
                var clr;
                if(colors.length==4){// cmyk -> rgb
                    colors = FColorConverter.prototype.CMYK_2_RGB(colors[0],colors[1],colors[2],colors[3])
                }

                doc.fillStyle =rgbToHex(colors);

                return doc;
            }


            //                      功能：透明度
            //                      参数：alpha：透明度
            //                      返回：doc对象
            doc.opacity = function(alpha){
                doc.globalAlpha *= alpha;
                return doc;
            }



            //                      功能：创建线性渐变
            //                      参数：渐变的bbox
            //                      返回：渐变对象，有函数：stop(ratios, clrs, alphas)
            //                                                  功能：创建渐变的所有stop
            //                                                  参数：     ratios：所有stop的位置的数组
            //                                                             clrs：所有stop的color的数组
            //                                                             alphas：所有stop的透明度的数组
            doc.linearGradient = function(x0,y0,x1,y1){
                var grad =  doc.createLinearGradient(x0,y0,x1,y1);

                grad.stop = function(ratio, clr, alpha){
                    grad.addColorStop.call(this, ratio,rgbToHex(clr));
                }
                return grad;


            }

            //                      功能：设定填充样式，并填充
            //                      参数：f：可变参数，可能是：
            //                                  1、奇偶或者非零填充方式，字符串类型，'non-zero' 或者'non-zero'
            //                                  2、渐变，渐变类型
            //                      返回：doc对象
            var doc_old_fill = doc.fill;
            doc.fill = function(f){
                if(typeof f == 'string'){

                }else {
                    doc.fillStyle = f;
                }
                doc_old_fill.call(doc);

                return doc;
            }

            //                      功能：创建径向渐变
            //                      参数：    x0	渐变的开始圆的 x 坐标
            //                                y0	渐变的开始圆的 y 坐标
            //                                r0	开始圆的半径
            //                                x1	渐变的结束圆的 x 坐标
            //                                y1	渐变的结束圆的 y 坐标
            //                                r1	结束圆的半径
            //                      返回：渐变对象，有函数：stop(ratios, clrs, alphas)
            //                                                  功能：创建渐变的所有stop
            //                                                  参数：     ratios：所有stop的位置的数组
            //                                                             clrs：所有stop的color的数组
            //                                                             alphas：所有stop的透明度的数组
            doc.radialGradient = function(x0,y0,r0,x1,y1,r1){
                var grad =  doc.createRadialGradient(x0,y0,r0,x1,y1,r1);
                grad.stop = function(ratios, clrs, alphas){
                    this.addColorStop.call(grad, ratio,rgbToHex(clr));
                }
                return grad;

            }

            //                      功能：填充色
            //                      参数：colors：rgb分量的颜色数组或者cmyk分量的颜色数组
            //                      返回：doc对象
            doc.strokeColor = function(colors){
                var clr;
                if(colors.length==4){// cmyk -> rgb
                    colors = FColorConverter.prototype.CMYK_2_RGB(colors[0],colors[1],colors[2],colors[3])
                }

                doc.strokeStyle= rgbToHex(colors);

                return doc;
            }
            //                      功能：设定描边的样式
            //                      参数：
            //                      返回：doc对象
            doc.lineWidthFunc = function(width) {    this.lineWidth=width;		return this;}
            doc.lineCapFunc = function(cap)     {    this.lineCap = cap;		return this;}
            doc.lineJoinFunc = function(join)   {    this.lineJoin = join;		return this;}
            doc.miterLimitFunc = function(limit){    this.miterLimit = limit;   return this;}

            //------------------------------------补充函数 end------------------------------------

            // 解析\描绘
            var p = fromPdfParseResult(json);
            canvas.width = p.w;
            canvas.height = p.h;
            p.addToPdf(doc,{});
        }
        function loadFinished(){
            // 定义解析数据
            var json='{"ct":6,"x":0,"y":0,"se":0,"w":515.91,"h":728.5,"al":1,"an":0,"sc":1,"lk":false,"ef":[],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"sub":[{"ct":1,"x":84.26,"y":61.12,"se":0,"w":11.38,"h":8.89,"al":1,"an":0,"sc":1,"lk":false,"ef":[{"id":-1,"type":101,"C":0,"M":0.1,"Y":0.2,"K":0.74}],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","pc":{"paras":[{"chars":[{"paths":[{"points":[[7.67,0,8],[11,0,1],[11,3.67,1],[18.67,3.67,1],[18.67,15.33,1],[15.67,15.33,1],[15.67,13.67,1],[11,13.67,1],[11,20.67,1],[7.67,20.67,1],[7.67,13.67,1],[3,13.67,1],[3,15.33,1],[0,15.33,1],[0,3.67,1],[7.67,3.67,1],[7.67,0,1]],"w":0,"h":0},{"points":[[15.67,6.33,8],[11,6.33,1],[11,11,1],[15.67,11,1],[15.67,6.33,1]],"w":0,"h":0},{"points":[[3,11,8],[7.67,11,1],[7.67,6.33,1],[3,6.33,1],[3,11,1]],"w":0,"h":0}],"w":18.67,"h":20.67,"x":0,"y":2.33,"bx":9.33,"by":17.67}],"w":0,"h":0}],"w":18.7,"h":20.0}}]}';
            parseAndDraw(json);
        }


    </script>

</head>
<body onload="loadFinished()">
<canvas id="canvas" width=800 height=600 style="border: 1px solid #ccc;"></canvas>
</body>
</html>